<HTML>
	<head>
		<title>HTML Tables Are Great!</title>
	</head>
	<body background="clouds-bg.jpg">
		<h1>TABLES</h1>
		<p>
			<h3>HTML Tables can be used to show tabular data, like a spreadsheet</h3>
			<table border="2" cellspacing="2" cellpadding="2" background="green-stone-bg.jpg">
				<thead>
					<tr>
						<th>Last Name</th>
						<th>First Name</th>
						<th>Middle Name</th>
						<th>Age</th>
						<th>Favorite Color</th>
						<th>Hair Color</th>
						<th>Photo</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td valign="top">Greenwood</td>
						<td valign="top">Whitney</td>
						<td valign="top">Elizabeth</td>
						<td valign="top" align="right">17</td>
						<td valign="top" bgcolor="blue"><font color="white">Blue</font></td>
						<td valign="top">Brown</td>
						<td valign="top"><img height="80px" width="80px" src="whitney.jpg"/></td>
					</tr>
					<tr>
						<td valign="top">Greenwood</td>
						<td valign="top">Spencer</td>
						<td valign="top">Abraham</td>
						<td valign="top" align="right">12</td>
						<td valign="top" bgcolor="black"><font color="white">Black</font></td>
						<td valign="top">Brown</td>
						<td valign="top"><img height="80px" width="80px" src="spencer.jpg"/></td>
					</tr>
					<tr>
						<td valign="top">Greenwood</td>
						<td valign="top">Andromeda</td>
						<td valign="top">Renee</td>
						<td valign="top" align="right">9</td>
						<td valign="top" bgcolor="yellow"><font color="black">Yellow</font></td>
						<td valign="top">Blonde</td>
						<td valign="top"><img height="80px" width="80px" src="andromeda.jpg"/></td>
					</tr>
				</tbody>
			</table>
		</p>
		<p>
			<h3>HTML Tables can be used to organize sections of a webpage tabular data, like a spreadsheet</h3>
			<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
				<tbody>
					<tr>
						<td bgcolor="orange" colspan="3" align="middle" valign="middle">
							TOP TITLE PART
						</td>
					</tr>
					<tr>
						<td width="15%" bgcolor="yellow" rowspan="3" align="left" valign="top">
							LEFT SECTION
						</td>
						<td width="70%" bgcolor="green" align="middle" valign="bottom" background="glossy-blue-ceramic-bg.jpg">
							CENTER TOP SECTION
						</td>
						<td width="15%" bgcolor="blue" rowspan="3" align="right" valign="middle">
							RIGHT SECTION
						</td>
					</tr>
					<tr>
						<td bgcolor="lightgreen" align="middle" valign="top" background="green-stone-bg.jpg">
							CENTER MIDDLE SECTION
							
							<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-size:4em;font-family:courier new; border:2px dotted black;color:black;">
								<tbody>
									<tr>
										<td align="middle" bgcolor="#fff">S</td>
										<td align="middle" bgcolor="#eee">P</td>
										<td align="middle" bgcolor="#ddd">E</td>
										<td align="middle" bgcolor="#ccc">N</td>
										<td align="middle" bgcolor="#bbb">C</td>
										<td align="middle" bgcolor="#aaa">E</td>
										<td align="middle" bgcolor="#999">R</td>
									</tr>
								</tbody>
							</table>
							</br>
							<table width="100%" cellspacing="0" cellpadding="0" border="1">
								<tbody>
									<tr>
										<td width="75%" bgcolor="red">&nbsp;</td>
										<td width="25%" bgcolor="white">75%&nbsp;</td>
									</tr>
								</tbody>
							</table>
							</br>
							<table width="100%" cellspacing="0" cellpadding="0" border="1">
								<tbody>
									<tr>
										<td width="25%" bgcolor="red">&nbsp;</td>
										<td width="75%" bgcolor="white">25%&nbsp;</td>
									</tr>
								</tbody>
							</table>
							</br>
							<table width="100%" cellspacing="0" cellpadding="0" border="1">
								<tbody>
									<tr>
										<td width="50%" bgcolor="red">&nbsp;</td>
										<td width="50%" bgcolor="white">50%&nbsp;</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr>
						<td bgcolor="darkgreen" align="right" valign="middle" background="gloomy-stripes-bg.jpg">
							CENTER BOTTOM SECTION
						</td>
					</tr>
					<tr>
						<td bgcolor="red" colspan="3" align="middle" valign="middle">
							BOTTOM FOOTER PART
						</td>
					</tr>
				</tbody>
			<table>
		</p>
	</body>
</html>